<script lang='ts' setup>
import { reactive,onMounted,ref} from 'vue'
import type { TableColumnCtx } from 'element-plus'

const state = reactive({ 
	baseInfo: {
		name: '美云狐 1年卡测试',
		price: '56',
		startTime: '2023-11-27',
		endTime: '',
		discount: '否',
		changeStore: '否',
		arrears: '否',
		jobAchievement: '否',
		cellAchievement: '2%',
		quota: '否',
	},
    tableData: [
		{
			id: 1, 
			date: '2023-12-22',
			week: '星期一',
			six: '女',
			money: '22',
		},
		{
			id: 1, 
			date: '2023-12-22',
			week: '星期一',
			six: '女',
			money: '22',
		},
		{
			id: 1, 
			date: '2023-12-22',
			week: '星期一',
			six: '女',
			money: '22',
		}
	] as Array<any>,
}) 
const props = withDefaults(defineProps<{
    modelValue: boolean,
	title: string
}>(), {
    modelValue: false, 
	title: ''
})

const emit = defineEmits(['update:modelValue'])

const closeDialog = () => {
    emit('update:modelValue', false)
}

interface SpanMethodProps {
  row: any
  column: TableColumnCtx<any>
  rowIndex: number
  columnIndex: number
}

const objectSpanMethod = ({
	row,
	column,
	rowIndex,
	columnIndex,
}: SpanMethodProps) => {
	console.log(columnIndex);
	
	// if (columnIndex === 0) {
	// 	return {
	// 		rowspan: 3,
	// 		colspan: 1,
	// 	}
	// 	// if (rowIndex % 2 === 0) {
			
	// 	// } else {
	// 	// 	return {
	// 	// 		rowspan: 0,
	// 	// 		colspan: 0,
	// 	// 	}
	// 	// }
	// } else {
	// 	return {
	// 		rowspan: 0,
	// 		colspan: 0,
	// 	}
	// }
}

</script>

<template>
    <main>
        <el-dialog v-model="props.modelValue" :title="`${props.title}的详情`" @close="closeDialog" style="width: 1000px;" center>
            <section>
				<h3 class="mb20 color-primary">基本详情</h3>
				<section class="mb20">
					<section class="base-info-item mb15">
						<section>
							<span>活动名称:</span><span>{{ state.baseInfo.name }}</span>
						</section>
						<section>
							<span>活动售价:</span><span>{{ state.baseInfo.price }}</span>
						</section>
						<section>
							<span>活动开始时间:</span><span>{{ state.baseInfo.startTime }}</span>
						</section>
					</section>
					<section class="base-info-item mb15">
						<section>
							<span>活动结束时间:</span><span>{{ state.baseInfo.endTime }}</span>
						</section>
						<section>
							<span>活动允许会员折扣:</span><span>{{ state.baseInfo.discount }}</span>
						</section>
						<section>
							<span>允许门店修改:</span><span>{{ state.baseInfo.changeStore }}</span>
						</section>
					</section>
					<section class="base-info-item mb15">
						<section>
							<span>允许欠款:</span><span>{{ state.baseInfo.arrears }}</span>
						</section>
						<section>
							<span>是否岗位业绩:</span><span>{{ state.baseInfo.jobAchievement }}</span>
						</section>
						<section>
							<span>销售业绩:</span><span>{{ state.baseInfo.cellAchievement }}</span>
						</section>
					</section>
				</section>
				<h3 class="mb20 color-primary">限购</h3>
				<section class="base-info-item mb15">
					<section>
						<span>是否限购:</span><span>{{ state.baseInfo.quota }}</span>
					</section>
				</section>

				<h3 class="mb20 color-primary">赠送商品</h3>
				<section class="base-info-item mb15">
					<section>
						<span>赠送商品:</span><span>{{ state.baseInfo.quota }}</span>
					</section>
				</section>
				<h3 class="mb20 color-primary">赠送商品</h3>
				<section class="base-info-item mb15">
					<section>
						<span>赠送商品:</span><span>{{ state.baseInfo.quota }}</span>
					</section>
				</section>

				<h3 class="mb10 mt30 color-primary">卡项信息</h3>
				<el-table :data="state.tableData" style="width: 100%" border class="mb20" :span-method="objectSpanMethod"> 
					<el-table-column label="卡项ID" prop="id" />
					<el-table-column label="卡项名称" prop="orderPrice" />
					<el-table-column label="属性" prop="orderPrice" />
					<el-table-column label="规格" prop="orderPrice" />
					<el-table-column label="实售价" prop="orderPrice" />
					<el-table-column label="赠送数量" prop="orderPrice" />
				</el-table>

				<h3 class="mb20 color-primary">赠送储值</h3>
				<section class="base-info-item mb15">
					<section>
						<span>赠送储值:</span><span>{{ state.baseInfo.quota }}</span>
					</section>
				</section>
				<h3 class="mb20 color-primary">赠送代金券</h3>
				<section class="base-info-item mb15">
					<section>
						<span>赠送代金券:</span><span>{{ state.baseInfo.quota }}</span>
					</section>
				</section>
			</section>
        </el-dialog>
    </main>
</template>

<style lang='scss' scoped>
.base-info-item{
	display: flex;
	justify-content: space-between;
	text-align: left;
	section {
		width: 30%;
		span{
			&:first-child{
				padding-right: 12px;
			}
		}
	}
}
</style>